<template>
    <div class="history-data-page">
        <el-dialog title="历史数据" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
            <div class="search-box">
                <span> 时间范围：</span>
                <el-date-picker v-model="searchDateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" :clearable="false">
                </el-date-picker>
                <el-button style="background-color: #43cf7c;" @click="getData">查 询</el-button>
            </div>
            <el-table :border="true" :stripe="true" :data="tableData"
                style="width: 100%;height: 50vh;overflow: auto;margin: 15px 0;" v-loading="loading">
                <el-table-column label="数据时间" prop="dataTime" width="180"></el-table-column>
                <el-table-column :label="tableHeader[item]" :prop="item" v-for="(item, index) in Object.keys(tableHeader)"
                    :key="index"></el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>
<script>
var dayjs = require('dayjs')
export default {
    data() {
        return {
            searchDateTime: "",
            tableData: [],
            dialogVisible: false,
            loading: false,
            currentPage: 1,
            pageSize: 10,
            total: 0,
            tableHeader: {
                "o3": "臭氧(μg/m³)",
                "no2": "二氧化氮(μg/m³)",
                "co": "一氧化碳(μg/m³)",
                "so2": "二氧化硫(μg/m³)",
                "pm10": "PM10(μg/m³)",
                "pm25": "PM2.5(μg/m³)",
                "temp": "温度(℃)",
                "humidity": "湿度(%RH)",
                "windSpeed": "风速(m/s)",
                "windDirection": "风向(°)",
                "tsp": "总悬浮颗粒物(μg/m³)",
                "vocs": "VOCs(mg/m³)",
            },
        };
    },
    props: ["code"],
    methods: {
        handleClose() {
            this.dialogVisible = false
        },
        getData() {
            let params = {
                code: this.code,
                stime: dayjs(this.searchDateTime[0]).format('YYYY-MM-DD HH:mm:ss'),
                etime: dayjs(this.searchDateTime[1]).format('YYYY-MM-DD HH:mm:ss'),
                pageIndex: this.currentPage,
                pageSize: this.pageSize,
            }
            console.log(params);
            this.loading = true
            this.$api.get("/station/stationMonitorHistoryData", { params }).then(res => {
                console.log(res);
                this.tableData = res.result.records
                this.total = res.result.total
                this.loading = false
                console.log(this.tableData);
            })
        },
        showDialog() {
            this.dialogVisible = true
            this.searchDateTime = [
                dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss').substring(0, 11) + "00:00:00",
                dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss').substring(0, 11) + "23:59:59"
            ]
            this.getData()
        },
        handleSizeChange(value) {
            this.pageSize = value
            this.getData()
        },
        handleCurrentChange(value) {
            this.currentPage = value
            this.getData()
        },
    }
};
</script>
<style lang="less">
.history-data-page {
    .el-table {

        th,
        td {
            white-space: nowrap;
            text-align: center;
        }
    }


    .el-dialog__body {
        padding-top: 10px;
    }

    .search-box {


        .el-button {
            width: 100px;
            height: 40px;
            margin-left: 20px;
            color: #fff;
            border-radius: 5px;

            span {
                margin: 0;
            }
        }

    }

    .pagination {
        margin-top: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>